<template>
    <div class="qrcode-page">
        <div class="qrcode-main">
            <h1 class="qrcode-title">注册成功</h1>
            <div class="qrcode-form">
                <div class="invitation-code">您的邀请码：aaaa</div>
                <div class="qrcode-container">
                    <canvas id="canvas"></canvas>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import QRCode from 'qrcode';

    export default {
        name: "qrcode",
        mounted() {
            this.showQrcode();
        },
        methods: {
            showQrcode: function () {
                let canvas = document.querySelector('#canvas');
                QRCode.toCanvas(canvas, "aaaa", {
                    width: 187,
                    margin: 0
                }, function (error) {
                    console.log(error);
                })
            }
        }
    }
</script>

<style lang="scss">
    .qrcode-page {
        min-height: 100%;
        background: url(../../assets/img/bg.png);
        background-size: 100% 100%;
        padding-top: 30%;
        .qrcode-main{
            .qrcode-title{
                font-size: 0.48rem;
                color: #fff;
                text-align: center;
                font-weight: 400;
            }
            .qrcode-form{
                background-color: #fff;
                width: 5.4rem;
                height: 5.6rem;
                margin: 0.48rem auto;
                border-radius: 0.2rem;
                padding: 0.4rem 0.6rem 0.4rem;
                font-size: 28px;
                color: #435069;
                .invitation-code{
                    font-size: 0.4rem;
                    text-align: center;
                }
                .qrcode-container{
                    height: 187px;
                    text-align: center;
                    margin-top: 0.5rem;
                }
            }
        }
    }
</style>
